<template>
  <h1>username:{{ username }}</h1>
  <h1>age:{{ age }}</h1>
  <h1>desc:{{ desc }}</h1>
</template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from "vue";

export default {
  name: "User",
  props: ['username', 'age'],
  setup(props,content) {
    onBeforeMount(()=>{
      console.log('onBeforeMount')
    });
    console.log(props,content)
    console.log(content)

    const desc = ref(props.username + ' --> ' + props.age)
    return {desc}
  }
}
</script>

<style scoped>
.d1{
  color: blue;
}
</style>